<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>

<!-- 可以说VUE都是由vue实例来组成的，可以使用vm.$destroy()销毁当前vm组件,此时再对message进行修改也不会再生效 -->

<body>
    <div id="root">
        <!-- 事件绑定 -->
        <div v-on:click="handleClick">
            <!-- v-on可以换成@ -->
            {{message}}
        </div>
        <!-- 全局组件调用 -->
        <item></item>

    </div>

    <script>

        // 全局组件
        Vue.component('item', {
            template: '<div>helloworld</div>'
        })


        var vm = new Vue({
            el: '#root',
            data: {
                message: 'helloworld'
            },
            methods: {
                handleClick: function () {
                    alert('hello')
                }
            },
        })
    </script>
</body>

</html>